// 实现这个项目的构建任务

const { src, dest, parallel, series, watch } = require("gulp");
// const gulpLoadPlugins =require('gulp-load-plugins')
// const plugins =gulpLoadPlugins()
const Bs = require("browser-sync");
//处理各种文件插件
const sass = require("gulp-sass");
const babel = require("gulp-babel");
const imagemin = require("gulp-imagemin");
const swig = require("gulp-swig");
const del = require("del");
const Ur = require("gulp-useref");
//资源压缩
const htmlmin = require("gulp-htmlmin");
const uglify = require("gulp-uglify");
const cheanCss = require("gulp-clean-css");
const If = require("gulp-if");
//样式
const style = () => {
  return src("src/assets/styles/*.scss", { base: "src" })
    .pipe(sass({ outputStyle: "expanded" }))
    .pipe(dest("temp"));
  // .pipe(bs.reload({ stream: true }));
};

//脚本
const script = () => {
  return src("src/assets/scripts/*.js", { base: "src" })
    .pipe(babel({ presets: ["@babel/preset-env"] }))
    .pipe(dest("temp"));
  // .pipe(bs.reload({ stream: true }));
};

// const data = {
//   menus: [
//     {
//       name: "Home",
//       icon: "aperture",
//       link: "index.html",
//     },
//     {
//       name: "Features",
//       link: "features.html",
//     },
//     {
//       name: "About",
//       link: "about.html",
//     },
//     {
//       name: "Contact",
//       link: "#",
//       children: [
//         {
//           name: "Twitter",
//           link: "https://twitter.com/w_zce",
//         },
//         {
//           name: "About",
//           link: "https://weibo.com/zceme",
//         },
//         {
//           name: "divider",
//         },
//         {
//           name: "About",
//           link: "https://github.com/zce",
//         },
//       ],
//     },
//   ],
//   pkg: require("./package.json"),
//   date: new Date(),
// };

// 页面
const html = () => {
  return src("src/*.html", { base: "src" })
    .pipe(swig({ data }))
    .pipe(dest("temp"));
  // .pipe(bs.reload({ stream: true }));
};

//图片
const image = () => {
  return src("src/assets/image/**", { base: "src" })
    .pipe(imagemin())
    .pipe(dest("dist"));
};

//字体
const font = () => {
  return src("src/assets/fonts/**", { base: "src" })
    .pipe(imagemin())
    .pipe(dest("dist"));
};

//其他
const extra = () => {
  return src("public/**", { base: "public" }).pipe(dest("dist"));
};

const clean = () => {
  return del(["dist", "temp"]);
};
//使用bs
const bs = Bs.create();
const serve = () => {
  // watch('src/assets/*.scss',style)
  // watch('src/js/*.js',script)
  // watch('src/*.html',html)
  watch(
    ["src/assets/styles/*.scss", "src/assets/scripts/*.js", "src/*.html"],
    bs.reload
  );
  // watch('src/assets/image/**',image)
  // watch('src/assets/fonts/**',font)
  // watch('public/**',extra)
  bs.init({
    notify: false,
    prot: 8085,
    open: true,
    files: "dist/**", //file可以不写 指定pipe
    server: {
      baseDir: ["temp", "src", "public"],
      routes: {
        "/node_modules": "node_modules",
      },
    },
  });
};
//压缩资源文件
const useref = () => {
  return src("temp/*.html", { base: "temp" })
    .pipe(Ur({ searchPath: ["temp", "."] }))
    .pipe(If(/\.js$/, uglify()))
    .pipe(If(/\.css$/, cheanCss()))
    .pipe(If(/\.html$/, htmlmin()))
    .pipe(dest("dist"));
};

// 合并任务src目录文件
const compile = parallel(html, script, style);
//所有文件构建
const build = series(
  clean,
  parallel(series(compile, useref), extra, image, font)
);
const start = series(compile, serve);
module.exports = {
  build, //打包
  start, //运行
  serve,
  clean, //清除
};
